<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue'
import axios from 'axios';
// 导入图标
import * as aecharts from 'echarts'
// 图表数据
const DataChart = reactive({
    Bento: [],
    bowl: [],
    dining: [],
    snack: [],
    xdata: [],
})
const lIneChart = ref()
// 初始化图表
const init = async () => {
    // 获取数据
    // 转成异步，先拿到数据再渲染
    await axios.get('https://c4156a34-94b2-4302-969f-e96f6277625a.bspapp.com/chart').then(res => {
        DataChart.Bento = res.data.Bento
        DataChart.bowl = res.data.bowl
        DataChart.dining = res.data.dining
        DataChart.snack = res.data.snack
        DataChart.xdata = res.data.xdata
    })
    // 通过dom，初始化echarts图表  获取ref虚拟化dom
    let myChart = aecharts.init(lIneChart.value)
    // 数据源
    var option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
            text: '销售数据',
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        toolbox: {
            feature: {
                // 下载图表
                saveAsImage: {},
                // 数据展示
                dataView: {},
                // 重置按钮
                restore: {},

            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                // 底下
                data: DataChart.xdata
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Line 1',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new aecharts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(128, 255, 165)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(1, 191, 236)'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: DataChart.Bento
            },
            {
                name: 'Line 2',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new aecharts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(0, 221, 255)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(77, 119, 255)'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: DataChart.bowl
            },
            {
                name: 'Line 3',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new aecharts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(55, 162, 255)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(116, 21, 219)'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: DataChart.dining
            },
            {
                name: 'Line 4',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new aecharts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(255, 0, 135)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(135, 0, 157)'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: DataChart.snack
            },
        ]
    };


    // 给予数据源
    myChart.setOption(option)
}
onMounted(() => {
    init()
})

</script>
<template>
    <!-- 图表 -->
    <div class='lIneChart' ref="lIneChart"></div>
</template>
<style lang='less' scoped>
.lIneChart {
    width: 100%;
    height: 400px;
}
</style>
<!-- pieChart -->